import { StyleSheet, Text, View, Image, TouchableWithoutFeedback } from 'react-native'
import React, { useState } from 'react'
import { getDomain } from '../../utils/tools'
import { connect } from 'react-redux'
import ImageViewer from '../../components/ImageViewer'
import { newsState } from '../../state'

const AlbumItem = ({ data, user, del = () => { } }) => {

  const [isModalOpen, setIsModalOpen] = useState(false)
  const [viewPictures, setViewPictures] = useState([])
  const [index, setIndex] = useState(0)

  const openViewer = (data, index) => {
    console.log('openViewer', index)
    setIndex(index)
    setViewPictures(data)
    setIsModalOpen(true)
  }

  const flexStyle = (length) => {
    return length < 9 && length % 3 !== 0
  }
  return (
    <>
      <ImageViewer visible={isModalOpen} index={index}
        imageUrls={viewPictures.map(item => ({ url: getDomain(item.url) }))}
        onClick={() => setIsModalOpen(false)}
      ></ImageViewer>
      <View style={styles.item}>
        <Image style={styles.avatar} source={{
          uri: getDomain(data.user.avatar)
        }}></Image>
        <View style={styles.info}>
          <Text style={styles.nickname}>{data.user.nickname}</Text>
          <Text style={styles.content}>{data.content}</Text>
          <View style={[styles.imgs, flexStyle(data.pictures.length) && {
        justifyContent: 'flex-start'
      }]}>
            {
              data.pictures.slice(0, 9).map((img, index) => {
                return (
                  // <Text key={index}>{index}</Text>
                  <TouchableWithoutFeedback key={index} onPress={() => openViewer(data.pictures, index)}>
                    <Image style={[styles.img, flexStyle(data.pictures.length) && {marginRight: 10}]} source={{
                      uri: getDomain(img.url || img)
                    }} resizeMode='cover'
                    ></Image>
                  </TouchableWithoutFeedback>
                )
              })
            }
            {
              data.pictures.length - 9 > 0 &&
              <>
                <View style={[styles.shadow, { opacity: .5 }]}></View>
                <Text style={[styles.shadow, { backgroundColor: 'none' }]}
                  onPress={() => openViewer(data.pictures, 8)}>+{data.pictures.length - 9}</Text>
              </>
            }
          </View>
          <View style={styles.note}>
            <Text style={styles.date}>{data.createTime}</Text>
            {
              data.state !== newsState.pass &&
              <Text style={{ marginRight: 6, color: '#000' }}>({newsState[data.state]})</Text>
            }
            {
              user._id === data.user._id && <Text style={styles.delBtn}
                onPress={() => del(data._id)}
              >删除</Text>
            }
          </View>
        </View>
      </View>
    </>

  )
}

export default connect((state) => {
  return {
    user: state.userReducer
  }
})(AlbumItem)

const w = '30%'
const h = 100
const margin = 5
const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    marginBottom: 10
  },
  info: {
    flex: 1,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  imgs: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    // backgroundColor: 'blue'
  },
  img: {
    width: w,
    height: h,
    // marginRight: margin,
    marginTop: margin
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20
    // backgroundColor: 'red'
  },
  nickname: {
    fontSize: 18,
    color: 'blue',
    marginBottom: 5,
    fontWeight: 'bold'
  },
  content: {
    marginBottom: 10
  },
  shadow: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    textAlign: 'center',
    lineHeight: h,
    width: w,
    height: h,
    backgroundColor: '#000',
    color: '#fff',
    fontSize: 30,
  },
  note: {
    display: 'flex',
    flexDirection: 'row'
  },
  date: {
    marginRight: 10,
    color: '#666'
  },
  delBtn: {
    color: 'blue'
  }
})